<template>
   <div class="action-wrapper">
      <div class="search-input">
         <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search" />
      </div>
      <div>
         <el-dropdown @command="handleCommand">
            <el-button bg text>
               操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
               <el-dropdown-item command="handleRefresh" icon="Refresh">刷新</el-dropdown-item>
               <div v-hasFunc="'dept:type:edit'">
                  <el-dropdown-item command="handleAddGroup">
                     <IconPlus name="system-group" />
                     <span>添加集团</span>
                  </el-dropdown-item>
               </div>
               <div v-hasFunc="'dept:type:edit'">
                  <el-dropdown-item command="handleAddCompany">
                     <IconPlus name="system-company" />
                     <span>添加公司</span>
                  </el-dropdown-item>
               </div>
               <div v-show="currentOrg && currentOrg.id != 0" v-hasFunc="'dept:type:edit'">
                  <el-dropdown-item command="handleEditOrg" icon="edit">
                     <span>组织变更</span>
                  </el-dropdown-item>
               </div>
            </template>
         </el-dropdown>
      </div>
   </div>
   <el-scrollbar class="tree-scrollbar" :native="false">
      <el-tree :data="deptOptions" :props="{ label: 'name', children: 'children' }" :filter-node-method="filterNode"
         ref="deptTreeRef" node-key="id" highlight-current default-expand-all @node-click="handleNodeClick"
         :expand-on-click-node="false">
         <template #default="{ node, data }">
            <div class="icon-name">
               <IconPlus v-if="orgIconMap[data.type]" :name="orgIconMap[data.type]" />
               <span>{{ data.name }}</span>
            </div>
         </template>
      </el-tree>
   </el-scrollbar>

</template>

<script setup>
import { treeDeptList } from "@/api/system/dept";
import { org_type } from "./dict"

const deptTreeRef = ref();
const currentOrg = ref();
const deptName = ref();
const deptOptions = ref([])

const emits = defineEmits(["deptChange", "actionClick"])

const orgIconMap = Object.fromEntries(
   org_type.map(item => [item.value, item.icon])
);

/** 查询部门下拉树结构 */
function getDeptTree() {
   let treeParams = { isActive: true }
   return treeDeptList(treeParams).then(response => {
      deptOptions.value = response;
      return response;
   }).finally(res => {
   });
};

watch(deptName, (val) => {
   deptTreeRef.value.filter(val)
})


/** 通过条件过滤节点  */
const filterNode = (value, data) => {
   if (!value) return true;
   return data.name.includes(value);
};

/** 节点单击事件 */
const handleNodeClick = (data) => {
   if (!currentOrg.value || currentOrg.value.id !== data.id) {
      currentOrg.value = data;
      emits("deptChange", data);
   }
};

/** 刷新树结构 */
const handleRefresh = () => {
   getDeptTree();
}

/**新增组织机构 */
const handleAddOrg = (type) => {
   emits("actionClick", "addOrg", type);
}

/**组织变更 */
const handleEditOrg = () => {
   emits("actionClick", "editOrg", currentOrg.value.id);
}



/** 下拉菜单项点击事件 */
const handleCommand = (cmd) => {
   switch (cmd) {
      case 'handleRefresh':
         handleRefresh()
         break;
      case 'handleAddGroup':
         handleAddOrg("GROUP");
         break;
      case 'handleAddCompany':
         handleAddOrg("COMPANY");
         break;
      case 'handleEditOrg':
         handleEditOrg();
         break;
      default:
         break;
   }
}

/** 初始化组织机构树 */
const initOrgTree = () => {
   getDeptTree().then(res => {
      nextTick(() => {
         if (deptOptions.value.length > 0) {
            const firstNode = deptTreeRef.value.getNode(deptOptions.value[0])
            deptTreeRef.value.setCurrentKey(firstNode.key)
            handleNodeClick(firstNode.data) // 手动触发节点点击
         }
      })
   })
}


defineExpose({
   refresh: handleRefresh,
   initOrgTree
})
</script>

<style lang="scss" scoped>
:deep(.el-dropdown) {
   font-size: var(--el-font-size-extra-small);
}

.action-wrapper {
   display: flex;
   margin-bottom: 20px;
   gap: 10px;
   align-items: center;

   .search-input {
      flex: 1;
   }
}

.tree-scrollbar {
   flex: 1;
}
</style>